<template>
	<scroll-view class="zmxy-container" @scroll="scroll" :scroll-y="true" :upper-threshold="upperThreshold"
		:lower-threshold="lowerThreshold" @scrolltoupper="e=>$emit('scrolltoupper',e)"
		@scrolltolower="e=>$emit('scrolltolower',e)">
		<view class="zmxy-nav-bar" :style="navBarStyle">
			<view class="zmxy-header">
				<slot name="header">
					{{title}}
				</slot>
			</view>
		</view>
		<view v-if="!!bg" class="zmxy-header-placeholder" :style="placeholderStyle">
		</view>
		<slot></slot>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				statusBarHeight: 0,
			}
		},
		props: {
			title: {
				type: String,
				default: () => {
					return ''
				}
			},
			color: {
				type: String,
				default: ''
			},
			bg: {
				type: String,
				default: ''
			},
			shadow: {
				type: Boolean,
				default: true
			},
			upperThreshold: {
				type: Number,
				default: 50
			},
			lowerThreshold: {
				type: Number,
				default: 50
			},
		},
		methods: {
			scroll(e) {
				this.scrollTop = e.detail.scrollTop;
			},
		},
		computed: {
			navBarStyle() {
				let style = 'padding-top: ' + this.statusBarHeight + 'px;';

				if (this.bg) {
					style += 'color: ' + this.color + ';';
					style += 'background-color: ' + this.bg + ';';
					return style;
				}

				if (this.scrollTop <= 100) {
					style += 'background-color: rgba(255,255,255,0);';
					if (this.shadow) {
						style += 'box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0);';
					}
				} else {
					style += 'background-color: rgba(255,255,255,1);';
					if (this.shadow) {
						style += 'box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);';
					}
				}
				return style;
			},
			placeholderStyle() {
				return 'padding-top: ' + this.statusBarHeight + 'px;'
			}
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
	}
</script>

<style lang="scss" scoped>
	.zmxy-container {
		height: 100vh;
		width: 100%;

		.zmxy-nav-bar {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			padding-top: 0;
			padding-right: 110px;
			background-color: rgba(255, 255, 255, 0);
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0);
			transition: background-color 0.8s, box-shadow 0.8s;

			.zmxy-header {
				height: 44px;
				line-height: 44px;
				width: 100%;
				padding-left: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.zmxy-header-placeholder {
			width: 100vw;
			height: 44px;
			background: white;
		}
	}
</style>